<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-17 11:17:35
 * @LastEditors: zhangziyu
 * @LastEditTime: 2022-11-17 16:11:00
 * @Introduce:
-->
<template>
   <div class="indexMenuBox" @mouseleave="move1()">
      <div class="indexMenuInner2">
        <div :class="selMenuIndex===index?'indexMenuInner1Sel':'indexMenuInner1'" class="betweens" v-for="(item,index) in menuArr" :key="index" @mouseenter="hover1(item,index)">
          <div>{{item.label}}</div>
          <div>＞</div>
        </div>
      </div>
      <div class="indexMenu" v-if="isMenu">
        <!-- <div class="jcstart">
          <div class="menuBox1 betweens">
            <div>热门推荐</div>
            <div>＞</div>
          </div>
          <div class="menuBox1 betweens">
            <div>
              今日热播
              <img src="../assets/img/huo.png" style="width:15px;" alt="">
            </div>
            <div>＞</div>
          </div>
          <div class="menuBox1 betweens">
            <div>专家推荐</div>
            <div>＞</div>
          </div>
          <div class="menuBox1 betweens">
            <div>全部</div>
            <div>＞</div>
          </div>
        </div> -->
        <span class="inner1" v-for="(item,index) in selMenuArr" :key="index" @click="xnktClick(item)">
          {{item.label}}
          <img src="../assets/img/hot.png" v-if="item==='鸽子'||item==='梅花鹿'||item==='橙子'||item==='百合种子'||item==='大麦'||item==='富贵竹'||item==='草菇'||item==='红茶'||item==='蜂蜜加工'||item==='观赏盆栽'||item==='白菜'||item==='旱稻'" style="width:15px;position: absolute;width: 23px;top: -7px;right: -10px;" alt="">
        </span>
        <!-- <div class="menuTips"></div> -->
        <!-- <div style="font-size:15px;font-weight:bold;margin-bottom:15px;">{{selMenuName}}——热门推荐TOP3</div>
        <div class="betweens">
          <div class="menuBox2">
            <div><img src="../assets/img/menu1.png" style="width:125px;" alt=""></div>
            <div>畜牧兽医专业知识</div>
            <img src="../assets/img/menu4.png" style="width:25px;position: absolute;top: 0;left: 5px;" alt="">
          </div>
          <div class="menuBox2">
            <div><img src="../assets/img/menu2.png" style="width:125px;" alt=""></div>
            <div>畜牧兽医专业知识</div>
            <img src="../assets/img/menu5.png" style="width:25px;position: absolute;top: 0;left: 5px;" alt="">
          </div>
          <div class="menuBox2">
            <div><img src="../assets/img/menu3.png" style="width:125px;" alt=""></div>
            <div>畜牧兽医专业知识</div>
            <img src="../assets/img/menu6.png" style="width:25px;position: absolute;top: 0;left: 5px;" alt="">
          </div>
        </div> -->
      </div>
      <!-- <div class="indexBanner">
        <img src="../assets/img/banner.jpg" alt="">
      </div> -->
    </div>
</template>

<script>
// import { menuArr } from '../data'
export default {
  data () {
    return {
      primaryMenu: {},
      menuArr: [],
      isMenu: false,
      selMenuArr: [],
      selMenuName: '',
      selMenuIndex: -1
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    getMenuList () {
      this.$http.get(`/web/video/dictTree`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.menuArr = res.data.options
      }).catch(() => {})
    },
    xnktClick (item) {
      this.$router.push({
        name: 'classroom',
        query: { id: item.value, value: JSON.stringify(this.primaryMenu) }
      })
    },

    hover1 (item, index) {
      this.primaryMenu = { label: item.label, value: item.value }
      this.isMenu = true
      this.selMenuIndex = index
      this.selMenuArr = item.children
      this.selMenuName = item.label
    },
    move1 () {
      this.isMenu = false
      this.selMenuIndex = -1
    }
  }
}
</script>
<style lang="scss" src="../index.scss" scoped></style>
